import 'package:fate_blind_box/chat_view/actions.dart';
import 'package:fate_blind_box/chat_view/chat_input.dart';
import 'package:fate_blind_box/chat_view/dialog.dart';
import 'package:fate_blind_box/chat_view/group_message_cell.dart';
import 'package:fate_blind_box/config/app_style.dart';
import 'package:fate_blind_box/im/groupdetilspage.dart';
import 'package:fate_blind_box/routes/page_route_names.dart';
import 'package:fate_blind_box/theme/theme_color.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:im_flutter_sdk/im_flutter_sdk.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../widget/appbar.dart';
import 'logic.dart';

class GroupChatPage extends GetView<GroupChatLogic> {
  const GroupChatPage({super.key});

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return true;
      },
      child: Obx(() {
        return Scaffold(
          appBar: HzAppBar(
            title: getNavHeader(),
            centerTitle: false,
            backgroundColor: ThemeColor.color19CF8F23,
            actions: [getStoreView(), morePerson()],
          ),
          backgroundColor: '#F2F4F5'.stringToColor,
          body: Column(
            children: [
              Expanded(
                  child: SmartRefresher(
                controller: controller.state.refreshController,
                onRefresh: controller.onRefresh,
                onLoading: controller.onLoading,
                enablePullUp: controller.state.hasMore.value,
                enablePullDown: false,
                child: ListView.builder(
                  reverse: true,
                  padding: EdgeInsets.only(bottom: 44.w),
                  controller: controller.state.scrollController,
                  itemBuilder: (context, index) {
                    return cellContent(index);
                  },
                  itemCount: controller.state.messageList.length,
                ),
              )),
              SafeArea(
                  child: ChatInput(
                conversationId: controller.state.groupId,
                type: ChatType.GroupChat,
                moreAction: customMenu(),
              )),
            ],
          ),
        );
      }),
    );
  }

  /// 导航栏上面的头像个昵称
  Widget getNavHeader() {
    return Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: Image.network(
            controller.state.avatarUrl.value,
            width: 30,
            height: 30,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(
          width: 10,
        ),
        Expanded(
          child: Text(
            controller.state.title.value,
            style: const TextStyle(
              color: Color(0xff0F1724),
              fontSize: 18,
              fontWeight: FontWeight.w500,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        )
      ],
    );
  }

  /// 店铺按钮
  Widget getStoreView() {
    return Align(
      alignment: Alignment.center,
      child: InkWell(
        onTap: () => Get.toNamed(PageRouteNames.store),
        child: Container(
          width: 46.w,
          height: 24.w,
          decoration: BoxDecoration(
              color: ThemeColor.colorCF8F23,
              borderRadius: BorderRadius.circular(2)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'images/chat/store.png',
                width: 16.w,
                height: 15.w,
                color: Colors.white,
              ),
              SizedBox(width: 4.w),
              Text(
                '店铺',
                style: TextStyle(fontSize: 8.sp),
              )
            ],
          ),
        ),
      ),
    );
  }

  // 自定义按钮
  List<ActionItem> customMenu() {
    return [
      ActionItem(
        type: 'custom',
        icon: Image.asset(
          'images/chat/chat_photo.png',
          width: 48.w,
          height: 48.w,
          fit: BoxFit.fill,
        ),
        title: "相册",
        onTap: _onPhotoActionTap,
      ),
      ActionItem(
        type: 'custom',
        icon: Image.asset(
          'images/chat/chat_camera.png',
          width: 48.w,
          height: 48.w,
          fit: BoxFit.fill,
        ),
        title: "相机",
        onTap: controller.cameraAction,
      ),
      // ActionItem(
      //   type: 'custom',
      //   icon: Image.asset(
      //     'assets/images/chat/chat_audio.png',
      //     fit: BoxFit.cover,
      //     // color: Colors.red,
      //   ),
      //   title: "语音通话",
      //   onTap: controller.audioCallAction,
      // ),
      // ActionItem(
      //   type: 'custom',
      //   icon: Image.asset(
      //     'assets/images/chat/chat_video.png',
      //     width: 48.w,
      //     height: 48.w,
      //     fit: BoxFit.fill,
      //   ),
      //   title: "视频通话",
      //   onTap: controller.videoCallAction,
      // ),
    ];
  }

  /// 弹窗选择视频或者图片
  _onPhotoActionTap(BuildContext context) {
    var style = TextStyle(fontSize: 16, color: '#333333'.stringToColor);
    showBottomChoose<String>(
            context: context,
            actions: [
              CupertinoActionSheetAction(
                onPressed: () {
                  Navigator.pop(context, '图片');
                },
                child: Text(
                  '图片',
                  style: style,
                ),
              ),
              CupertinoActionSheetAction(
                onPressed: () {
                  Navigator.pop(context, '视频');
                },
                child: Text(
                  '视频',
                  style: style,
                ),
              ),
            ],
            showCancel: true)
        .then((value) async {
      if (value != null) controller.checkAvatar(value);
    });
  }

  Widget cellContent(index) {
    return Obx(() {
      if (controller.state.messageList.isNotEmpty == true) {
        return GroupMessageCell(
          message: controller.state.messageList[index],
          userInfo: controller.state.userInfoList[index],
          // model: controller.state.locInfoList[index],
        );
      } else {
        return Container();
      }
    });
  }

  /// 查看更多
  morePerson() {
    return GestureDetector(
        onTap: () {
          Get.to(
              GroupDetailsPage(
                controller.state.groupId,
                controller.state.owner,
              ),
              routeName: PageRouteNames.groupDetailsPage);
        },
        child: SizedBox(
            width: 56,
            height: 56,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  color: Colors.transparent,
                  width: 14,
                  height: 14,
                ),
                const Icon(
                  Icons.more_horiz,
                  color: Colors.black,
                  size: 30,
                ),
              ],
            )));
  }
}
